<template>
    <div class="min-h-screen bg-gray-50 font-sans" v-if="post">
        <!-- 顶部导航 -->
        <header class="sticky top-0 z-30 bg-white shadow-sm">
            <div class="container mx-auto px-4 py-4 flex items-center justify-between">
                <button class="text-gray-700 hover:text-pink-500 transition-colors" @click="toUrl('/app')">
                    <i class="fa fa-arrow-left text-xl"></i>
                </button>
                <h1 class="text-lg font-medium text-gray-800">{{ post.title }}</h1>
                <div class="w-6"></div> <!-- 占位元素，保持布局平衡 -->
            </div>
        </header>

        <!-- 文章主体 -->
        <main class="container mx-auto px-4 py-6">
            <!-- 文章标题 -->
            <!-- <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 leading-tight mb-4">
                ⚠️30 岁后素颜不敢见人？你的胶原正在 “断崖式逃跑”！​
            </h1> -->

            <!-- 封面图 -->
            <div
                class="relative w-full rounded-xl overflow-hidden mb-6 shadow-md transform transition-transform hover:scale-[1.01]">
                <img :src="post.image" alt="胶原蛋白修护" class="w-full h-auto object-cover">
            </div>

            <!-- 文章标签 -->
            <div class="flex flex-wrap gap-2 mb-8">
                <span class="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-sm font-medium">
                    胶原蛋白
                </span>
                <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">
                    肌肤修护
                </span>
                <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium">
                    抗衰保养
                </span>
                <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium">
                    科学护肤
                </span>
            </div>

            <!-- 文章内容 -->
            <article class="text-gray-700 leading-relaxed mb-12 space-y-6">
                <div v-html="post.content">

                </div>
            </article>

            <!-- 评论区 -->
            <Comment :post-id="id" :post-type="type" class="mb-16" />

        </main>

        <!-- 底部按钮 -->
        <footer class="sticky bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-4 px-6 shadow-lg z-20">
            <button @click="showModal = true"
                class="w-full bg-gradient-to-r from-pink-500 to-pink-600 text-white font-medium py-3 px-6 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-opacity-50">
                点击测试我的专属方案
            </button>
        </footer>

        <!-- 年龄选择弹窗 -->
        <div v-if="showModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
            @click="showModal = false">
            <div class="bg-white rounded-2xl p-6 w-full max-w-md shadow-2xl transform transition-all" @click.stop>
                <!-- 弹窗标题 -->
                <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-start">
                    <span class="text-2xl mr-2">📝</span>
                    <span>选你的年龄区间<br><span class="text-sm font-normal text-gray-500">(点击选项即可提交)</span></span>
                </h3>

                <!-- 年龄选项 -->
                <div class="space-y-3 mb-6">
                    <label v-for="(age, index) in ageOptions" :key="index"
                        class="flex items-center p-4 border border-gray-200 rounded-xl cursor-pointer hover:bg-pink-50 hover:border-pink-200 transition-colors">
                        <input type="radio" name="ageGroup" :value="age.value" v-model="selectedAge"
                            class="w-5 h-5 text-pink-500 focus:ring-pink-400 border-gray-300">
                        <span class="ml-3 text-gray-700">{{ age.label }}</span>
                    </label>
                </div>

                <!-- 提交按钮 -->
                <button @click="submitAge" :disabled="!selectedAge"
                    class="w-full py-3 px-4 bg-pink-500 text-white font-medium rounded-xl shadow hover:bg-pink-600 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed">
                    去查看专属方案
                </button>
            </div>
        </div>

        <!-- 结果提示弹窗 -->
        <div v-if="showResult" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
            @click="showResult = false">
            <div class="bg-white rounded-2xl p-6 w-full max-w-md shadow-2xl transform transition-all" @click.stop>
                <div class="text-center mb-4">
                    <div
                        class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-green-500 mb-4">
                        <i class="fa fa-check text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">提交成功！</h3>
                    <p class="text-gray-600">已为您准备专属方案和优惠</p>
                </div>

                <div class="bg-gray-50 p-4 rounded-xl mb-6">
                    <h4 class="font-medium text-gray-800 mb-2">您的专属内容：</h4>
                    <p class="text-gray-700 mb-3">{{ collagenTips }}</p>
                    <div class="flex items-center p-3 bg-pink-50 rounded-lg">
                        <i class="fa fa-ticket text-pink-500 mr-2"></i>
                        <span class="text-gray-800 font-medium">品牌150元专属优惠券</span>
                    </div>
                </div>

                <button @click="showResult = false"
                    class="w-full py-3 px-4 bg-pink-500 text-white font-medium rounded-xl shadow hover:bg-pink-600 transition-colors">
                    关闭
                </button>
            </div>
        </div>
    </div>
</template>

<script>
import { listCover, getCover, delCover, addCover, updateCover } from "@/api/demo/cover";
import Comment from '@/views/components/Comment.vue';

export default {
    components: {
        Comment
    },
    data() {
        return {
            baseApi: process.env.VUE_APP_BASE_API,

            showModal: false,
            showResult: false,
            selectedAge: null,
            ageOptions: [
                { label: '20-25岁', value: '20-25' },
                { label: '26-30岁', value: '26-30' },
                { label: '31-35岁', value: '31-35' },
                { label: '35+岁', value: '35+' }
            ],
            collagenTips: '',
            post: null,
            id: 0,
            type: 'app',
        };
    },
    created() {
        this.id = this.$route.query.id;
        this.type = this.$route.query.type;
        this.init();
    },

    methods: {
        init() {
            if (this.type == 'app') {
                this.getApp();
            } else {
                this.getCase();
            }
        },
        getCase() {
        },
        getApp() {
            getCover(this.id).then(res => {
                if (res.code == 200) {
                    this.post = res.data;
                }
            });
        },
        toUrl(url) {
            this.$router.push(url);
        },
        submitAge() {
            this.$router.push('/mr/guwen');
            return
            if (!this.selectedAge) return;

            // 根据年龄设置对应的胶原修护重点
            switch (this.selectedAge) {
                case '20-25':
                    this.collagenTips = '20-25岁胶原修护重点：预防为主，注重保湿和防晒，避免胶原蛋白过早流失，可适当补充基础胶原蛋白肽。';
                    break;
                case '26-30':
                    this.collagenTips = '26-30岁胶原修护重点：加强内源性胶原蛋白合成，使用含维生素C、肽类成分的产品，配合规律作息。';
                    break;
                case '31-35':
                    this.collagenTips = '31-35岁胶原修护重点：刺激胶原蛋白再生，可尝试含视黄醇、玻色因等成分的抗衰产品，结合适度运动。';
                    break;
                case '35+':
                    this.collagenTips = '35+岁胶原修护重点：综合修护方案，内外结合补充，选择具有多重抗衰成分的产品，注重整体肌肤健康。';
                    break;
            }

            this.showModal = false;
            this.showResult = true;
        }
    }
};
</script>

<style scoped>
/* 基础样式补充 */
input[type="radio"]:checked+span {
    color: #ca7599;
    font-weight: 500;
}

input[type="radio"]:checked {
    accent-color: #ca7599;
}
</style>